﻿@model Wiwi.ViewModels.UserProfile
@{
    ViewBag.Title = "Edit Your Profile";
    var HomeDir = System.Configuration.ConfigurationManager.AppSettings["HomeDirectory"].ToString(); 
}

 

@using SSB.Web.Mvc.Html
@using (Html.BeginForm("", "home", FormMethod.Post, new { enctype = "multipart/form-data", action = "/Home/EditProfile/" }))
{
    @Html.ValidationSummary(true, "Please correct the errors and try again.")
    <div class="grid_6 margin-top form-bg" id="wiwi-sign-up">  
    
        <h5>Edit your Profile Details</h5>

            <div class="editor-label">    
                <label class="Firstname" for="Firstname">First Name</label>                    
                @Html.TextBoxFor(m => m.Firstname, new { @placeholder = "First Name" }) 
                    <div class="helper-tip">
                     @Html.ValidationMessageFor(m => m.Firstname) 
                    </div>
            </div>
    
            <div class="editor-label"> 
                <label class="Lastname" for="Lastname">Last Name</label>                           
                @Html.TextBoxFor(m => m.Lastname, new { @placeholder = "Last Name" })
                 <div class="helper-tip">
                     @Html.ValidationMessageFor(m => m.Lastname) 
                    </div>
            </div>
    
            <div class="editor-label">
                <label class="Email" for="Email">Email</label>  
                @Html.TextBoxFor(m => m.Email, new { @placeholder = "Your Email Address", @onblur = " CheckEmailAvailability();" })
                 <div class="helper-tip" id="is-email-available">
                     @Html.ValidationMessageFor(m => m.Email) 
                    </div>        
            </div>
        
            <p class="birth-date">
          @*      <label class="birthDate" for="BirthDate">Birth Date</label> 
                @Html.TextBoxFor(m => m.BirthDate, new { @Readonly = true , @class = "birthDate" });
                *@

                <select id="DtDay" name ="DtDay" >
                <option value ="">Day</option>
                    @for (int i = 1; i < 32; i++)
                    {
                        <option value ="@i.ToString()">@i.ToString()</option>
                    }
                </select>

                <select id="DtMon" name ="DtMon" >
                    <option value ="" >Month</option>
                    <option value ="1" >Jan</option>
                    <option value ="2" >Feb</option>
                    <option value ="3" >Mar</option>
                    <option value ="4" >Apr</option>
                    <option value ="5" >May</option>
                    <option value ="6" >Jun</option>
                    <option value ="7" >Jul</option>
                    <option value ="8" >Aug</option>
                    <option value ="9" >Sep</option>
                    <option value ="10" >Oct</option>
                    <option value ="11" >Nov</option>
                    <option value ="12" >Dec</option>
                </select>

                <select id="DtYr" name ="DtYr" >
                <option value ="" >Year</option>
                @{
                    for (int j = 2000; j > 1940; j--)
                    { 
                    <option value ="@j.ToString()" >@j.ToString()</option>
                    }
                }
                </select>
            </p>
         
            <div class="editor-label">
                @Html.LabelFor(m => m.Sex)
            </div>

            <p class="check-box">
                @Html.RadioButton("sex", "M", Model.Sex == "M" ? true : false, new { @class = "aCheckbox" })  <span>Male</span> 
                @Html.RadioButton("sex", "F", Model.Sex == "F" ? true : false, new { @class = "aCheckbox" })  <span>Female</span> 
            </p>

            <div class="editor-label">
               <label class="ContactNo" for="ContactNo">Contact Number</label> 
               @Html.TextBoxFor(m => m.ContactNo, new { @class = "ContactNo" })
            </div>

             <div class="editor-label">
                <label class="Bio" for="Bio">Bio</label> 
                @Html.TextBoxFor(m => m.Bio, new { @placeholder = "Your Bio", @class = "Bio" })
                <div class="helper-tip"> 
                @Html.ValidationMessageFor(m => m.Bio)
                </div>
            </div> 

    

            <div class="editor-field">
                <input type="file" id="file1" name ="file1" />
@*
                @if (Model.photo != null)
                {
                <img width="100px" id="ImgPhoto" height ="100px" src='@Url.Action("ShowUserImage", "Home", new { Uid = @Model.UsrID })' />
                }
*@
            </div>

            <input type="submit" id="submit-button" class="xWide"  value="Save Changes" /> 
  
	        <div class="clear"></div>

    </div>
}

<div class="grid_5 push_2 box-shadow margin-top user-profile-box" id="live-preview">

    	<h4 class="tabbed">User Preview</h4> 
    	<img src="@Url.Action("ShowUserImage", "Home", new { Uid = @Model.UsrID })" height="64" width="64" alt="@Model.Firstname @Model.Lastname's avatar" />
    	
    	<div class="user-profile small-avatar">
    		<h2><span>@Model.Firstname</span> <span>@Model.Lastname</span></h2>
    		aka <span><em>@Model.UserName</em></span>
            <p>@Model.Bio</p>    	
    	</div>
      		
</div>


<script type="text/javascript">
     // 'Flying' Labels
     $(document).ready(function () {
         $('#wiwi-sign-up .editor-label label').css('display', 'none');

         $('input').focus(function () {
             var theId = $(this).attr('id');
             $('label.' + theId).fadeIn('fast');
         });

         $('input').blur(function () {
             var theId = $(this).attr('id');
             $('label.' + theId).fadeOut('medium');
         });


         // Live Update
        var $liveUpdate = $("#live-preview");

            $('#Firstname').keyup(function () {
                $liveUpdate.find("h2 span:eq(0)").html($('#Firstname').val());
            });

            $('#Lastname').keyup(function () {
                $liveUpdate.find("h2 span:eq(1)").html($('#Lastname').val());
            });

            $('#Bio').keyup(function () {
                $liveUpdate.find("p").html($('#Bio').val());
            });

     });

</script>
    
  